/* eslint-disable no-irregular-whitespace */
<template>
<div class="animate">
    <Row>
        <Col span="6">
        <Input v-model="inp" />
        </Col>
        <Col span="6"><Button @click="handleAdd" type="info">添加</Button></Col>
        <Col span="6">
        <ul>
            <li v-for="(item,i) in list1" :key="i">
                {{item.label}}
            </li>
        </ul>
        </Col>
    </Row>

    <h3>animate 过渡动画</h3>
    <Button @click="handleClick" type="info">{{!showBox?'显示':'隐藏'}}</Button>
    <transition name="fade">
        <div class="box" v-if="showBox">content</div>
    </transition>
    <transition name="fade">
        <div class="content" v-if="ok"></div>
    </transition>
    <h3>
        transition-group
    </h3>
    <transition-group tag="ul" name="list" appear>
        <li v-for="item in items" :key="item.id" class="list-li" v-if="showBox">
            {{ item.text }}
        </li>
    </transition-group>

</div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            showBox: false,
            ok: true,
            list1: [{
                    label: '苹果'
                },
                {
                    label: '香蕉'
                },
                {
                    label: '桃子'
                },
            ],
            inp: '',
            items: [{
                    id: 1,
                    text: '11'
                },
                {
                    id: 2,
                    text: '22'
                },
                {
                    id: 3,
                    text: '33'
                },
                {
                    id: 4,
                    text: '44'
                }
            ]
        };
    },
    methods: {
        handleClick() {
            this.showBox = !this.showBox;
            this.ok = !this.ok;
        },
        handleAdd() {
            this.list1.push({
                label: this.inp
            })
            this.inp=""
        }
    }
};
</script>

<style lang="less" scoped>
.animate {
    .box {
        width: 60px;
        height: 60px;
        border: 1px solid #f00;
    }

    .content {
        width: 100px;
        height: 100px;
        background: black;
        opacity: 1;
    }

    .fade-enter,
    .fade-leave-active {
        opacity: 0;
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: all 5s ease;
    }
}
</style><style>
.list-li {
    width: 100px;
    height: 20px;
    transform: translate(0, 0);
}

.list-enter,
.list-leave-active {
    opacity: 0;
    transform: translate(-30px, 0);
}

.list-enter-active,
.list-leave-active {
    transition: all 0.5s ease;
}
</style>
